<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<script src="resources/js/etc/regGamesPreview.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style type="text/css">
#gameImgT td, #gameMiniImgT td {
	border:1px solid #bbbbbb;
}
</style>

</head>

<body>

<h2>게임 등록</h2>
<br/>

<form action="regGames.ga" method="post" autocomplete="off" enctype="multipart/form-data" onsubmit="return checkInput()">
    <table>
        <tr>
            <td width="120">■ 게임 명 </td>
            <td><input type="text" name="name" size="40" maxlength="20"/></td>
        </tr>
        <tr>
            <td>■ ID </td>
            <td><input type="text" value="자동 발급" size="40" disabled/></td>
        </tr>
        <tr>
            <td>■ 게임 종류 </td>
            <td>
                <select name="genre" style="width:260px;">
                    <option value="all">전체</option>
                    <option value="puzzle">두뇌게임/퍼즐</option>
                    <option value="racing">레이싱 게임</option>
                    <option value="sports">스포츠 게임</option>
                    <option value="arcade">아케이드 게임</option>
                    <option value="card">카드배틀 게임</option>
                    <option value="casual">캐주얼 게임</option>
                </select>
            </td>
        </tr>
        <tr>
            <td valign="top">■ 상세 설명 </td>
            <td><textarea rows="6" cols="80" name="info" style="resize:none;"></textarea></td>
        </tr>
    </table>
    
    <br/><br/>
    
    <table style="width:800px;">
        <tr>
            <td width="15%">■ 카테고리 적용</td>
            <td>
                <input type="checkbox" id="serviceAllChk" checked="checked" onclick="serviceAllCtr(this)"/> 전체 &nbsp;
                <input type="checkbox" id="serviceChk" name="g_ggong" checked="checked" onclick="checkServiceAll()" onchange="checkGgong()"/> 꽁게임 
                (점수의 <input type="text" name="offerggong" size="7" maxlength="10"/> % 꽁) &nbsp;
                <input type="checkbox" id="serviceChk" name="g_ggongdon" checked="checked" onclick="checkServiceAll()"/> 꽁돈게임 &nbsp;
                <input type="checkbox" id="serviceChk" name="g_time" checked="checked" onclick="checkServiceAll()"/> 타임게임 &nbsp;
                <input type="checkbox" id="serviceChk" name="g_special" checked="checked" onclick="checkServiceAll()"/> 스페셜게임 &nbsp;
            </td>
        </tr>
    </table>
    
    <br/><br/>
    
    <table style="width:800px;">
        <tr>
            <td width="15%">■ 가능 미션</td>
            <td>
                <input type="radio" name="mission" value="score" checked/>점수 &nbsp;
                <input type="radio" name="mission" value="level"/>단계 &nbsp;
                <input type="radio" name="mission" value="timelimit"/>버티기 &nbsp;
                <input type="radio" name="mission" value="timeclear"/>초안에 끝내기
            </td>
        </tr>
        <tr>
            <td valign="top">■ 미션 가이드라인</td>
            <td>
                <textarea name="m_detail" rows="3" cols="80" style="resize:none;"></textarea>
            </td>
        </tr>
    </table>
     
     <br/><br/>
    
    <!-- 이미지 -->
    ■ 게임 이미지<p/>
    <table id="gameImgT" style="width:440px;" cellspacing="0" cellpadding="5">
        <tr>
            <td width="24%" class="table_titleHeight">메인이미지</td>
            <td width="24%">240 * 240</td>
            <td width="52%">
                <input type="file" id="img0" name="gamefiles[0]" onchange="previewImg(this)" onclick="fileClear(this)"/>
            </td>
        </tr>
        <tr>
            <td class="table_titleHeight">상세이미지1</td>
            <td>240 * 240</td>
            <td>
                <input type="file" id="img1" name="gamefiles[1]" onchange="previewImg(this)" onclick="fileClear(this)"/>
            </td>
        </tr>
        <tr>
            <td class="table_titleHeight">상세이미지2</td>
            <td>240 * 240</td>
            <td>
                <input type="file" id="img2" name="gamefiles[2]" onchange="previewImg(this)" onclick="fileClear(this)"/>
            </td>
        </tr>
        <tr>
            <td class="table_titleHeight">상세이미지3</td>
            <td>240 * 240</td>
            <td>
                <input type="file" id="img3" name="gamefiles[3]" onchange="previewImg(this)" onclick="fileClear(this)"/>
            </td>
        </tr>
    </table>
    
    <!-- 미니 미리보기 -->
    <div style="width:440px;float:left;">
        <table id="gameMiniImgT" style="width:440px;" cellspacing="0" cellpadding="5">
            <tr style="height:110px;">
                <td align="center" width="25%"><div id="img0_preview" style="width:90px;height:90px;display:table-cell;vertical-align:middle;" onmouseover="mousePreview(0)">미리보기</div></td>
                <td align="center" width="25%"><div id="img1_preview" style="width:90px;height:90px;display:table-cell;vertical-align:middle;" onmouseover="mousePreview(1)">미리보기</div></td>
                <td align="center" width="25%"><div id="img2_preview" style="width:90px;height:90px;display:table-cell;vertical-align:middle;" onmouseover="mousePreview(2)">미리보기</div></td>
                <td align="center" width="25%"><div id="img3_preview" style="width:90px;height:90px;display:table-cell;vertical-align:middle;" onmouseover="mousePreview(3)">미리보기</div></td>
            </tr>
            <tr style="height:30px;">
                <td align="center">메인이미지</td>
                <td align="center">상세이미지1</td>
                <td align="center">상세이미지2</td>
                <td align="center">상세이미지3</td>
            </tr>
            <tr style="height:30px;">
                <td align="center"><div id="img0_size">사이즈</div></td>
                <td align="center"><div id="img1_size">사이즈</div></td>
                <td align="center"><div id="img2_size">사이즈</div></td>
                <td align="center"><div id="img3_size">사이즈</div></td>
            </tr>
        </table>
    </div>
    
    <!-- 큰 미리보기 -->
    <div style="width:300px;height:328px;float:left;position:relative;top:-154px;left:40px;border:1px solid #bbbbbb;">
        <table width="100%">
            <tr style="height:328px;">
                <td align="center"><div id="big_preview" style="width:280px;height:308px;display:table-cell;vertical-align:middle;">미리보기</div></td>
            </tr>
        </table>
    </div>
    
    <div style="position:relative; top:-120px; left:600px;width:120px;"><input type="submit" value="등록 완료" class="bigBtn"/></div>
</form>

<div id="hiddenP" style="display:none;"></div>

</body>
</html>